<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.example.ks.entity.Order, java.util.List, java.util.Map" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>宠物服务订单管理</title>
  <!-- 引入 Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#10B981',
            warning: '#F59E0B',
            danger: '#EF4444'
          }
        }
      }
    }
  </script>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-6xl">
  <div class="bg-white rounded-xl shadow-md p-6 mb-6">
    <div class="flex justify-between items-center mb-6">
      <div>
        <h1 class="text-3xl font-bold text-gray-800">宠物服务订单管理</h1>
        <p class="text-gray-600">管理所有宠物服务订单</p>
      </div>
      <div class="flex space-x-3">
        <form action="admin-order" method="get">
          <input type="hidden" name="action" value="search">
          <button type="submit" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition flex items-center">
            <i class="fa fa-search mr-2"></i>查找我的订单
          </button>
        </form>
        <form action="admin-order" method="get">
          <button type="submit" class="bg-secondary hover:bg-secondary/90 text-white px-4 py-2 rounded-lg transition flex items-center">
            <i class="fa fa-list mr-2"></i>查看所有订单
          </button>
        </form>
        <a href="logout" class="bg-danger hover:bg-danger/90 text-white px-4 py-2 rounded-lg transition flex items-center">
          <i class="fa fa-sign-out mr-2"></i>退出登录
        </a>
      </div>
    </div>

    <% if (request.getAttribute("error") != null) { %>
    <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded">
      <p class="text-red-700"><%= request.getAttribute("error") %></p>
    </div>
    <% } %>

    <div class="overflow-x-auto rounded-lg shadow">
      <table class="min-w-full bg-white">
        <thead class="bg-gray-100">
        <tr>
          <th class="py-3 px-4 text-left text-gray-700 font-semibold">管理员</th>
          <th class="py-3 px-4 text-left text-gray-700 font-semibold">用户</th>
          <th class="py-3 px-4 text-left text-gray-700 font-semibold">开始时间</th>
          <th class="py-3 px-4 text-left text-gray-700 font-semibold">服务项目</th>
          <th class="py-3 px-4 text-left text-gray-700 font-semibold">宠物名称</th>
          <th class="py-3 px-4 text-left text-gray-700 font-semibold">状态</th>
          <th class="py-3 px-4 text-left text-gray-700 font-semibold">操作</th>
        </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
        <%
          List<Order> orders = (List<Order>) request.getAttribute("orders");
          Map<Integer, String> userNames = (Map<Integer, String>) request.getAttribute("userNames");
          if (orders != null) {
            for (Order order : orders) {
        %>
        <tr class="hover:bg-gray-50">
          <td class="py-4 px-4"><%= userNames.get(order.getAdminId()) %></td>
          <td class="py-4 px-4"><%= userNames.get(order.getUserId()) %></td>
          <td class="py-4 px-4"><%= order.getStartTime() %></td>
          <td class="py-4 px-4"><%= order.getServiceItem() %></td>
          <td class="py-4 px-4"><%= order.getPetName() %></td>
          <td class="py-4 px-4">
            <%
              String statusClass = "";
              switch (order.getStatus()) {
                case 0:
                  statusClass = "bg-yellow-100 text-yellow-800";
                  out.print("<span class='px-3 py-1 rounded-full text-sm " + statusClass + "'>服务未开始</span>");
                  break;
                case 1:
                  statusClass = "bg-blue-100 text-blue-800";
                  out.print("<span class='px-3 py-1 rounded-full text-sm " + statusClass + "'>服务进行中</span>");
                  break;
                case 2:
                  statusClass = "bg-green-100 text-green-800";
                  out.print("<span class='px-3 py-1 rounded-full text-sm " + statusClass + "'>服务已完成</span>");
                  break;
              }
            %>
          </td>
          <td class="py-4 px-4">
            <form action="admin-order" method="post" class="flex items-center space-x-2">
              <input type="hidden" name="orderId" value="<%= order.getId() %>">
              <select name="status" class="rounded-lg border-gray-300 shadow-sm py-2 px-3 border focus:ring-primary focus:border-primary">
                <option value="0" <%= order.getStatus() == 0 ? "selected" : "" %>>服务未开始</option>
                <option value="1" <%= order.getStatus() == 1 ? "selected" : "" %>>服务进行中</option>
                <option value="2" <%= order.getStatus() == 2 ? "selected" : "" %>>服务已完成</option>
              </select>
              <button type="submit" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition">
                <i class="fa fa-refresh mr-1"></i>更新
              </button>
            </form>
          </td>
        </tr>
        <%
            }
          }
        %>
        </tbody>
      </table>

      <% if (orders == null || orders.isEmpty()) { %>
      <div class="text-center py-8 text-gray-500">
        <i class="fa fa-inbox text-4xl mb-3"></i>
        <p>暂无订单数据</p>
      </div>
      <% } %>
    </div>
  </div>
</div>
</body>
</html>